<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="left">
    <el-form-item label="用户名">
      <label>{{ form.username }}</label>
    </el-form-item>
    <el-form-item label="用户姓名">
      <label>{{ form.name }}</label>
    </el-form-item>
    <el-form-item label="手机">
      <label>{{ form.mobile }}</label>
    </el-form-item>
    <el-form-item label="邮箱">
      <label>{{ form.email }}</label>
    </el-form-item>
    <el-form-item label="部门">
      <label>{{ form.deptName }}</label>
    </el-form-item>

  </el-form>
</template>
<script setup>
const store = useStore();
const form = reactive({
  name: '',
  username: '',
  mobile: '',
  email: '',
  deptName: ''
});
const profile = computed(() => store.state.user.userInfo)

watch(profile, () => {
  updateForm();
}, { immediate: true })

function updateForm() {
  form.name = profile.value.name;
  form.username = profile.value.username;
  form.mobile = profile.value.mobile;
  form.email = profile.value.email;
  form.deptName = profile.value.deptName;
}

</script>
